<template>
  <div class="container_max">
    <el-menu mode="horizontal" router :default-active="currentPath">
      <el-menu-item v-for="item in pageList" :key="item.path" :index="item.path">
        <span>{{ item.meta.title }}</span>
      </el-menu-item>
    </el-menu>

    <el-container>
      <el-main>
        <router-view v-slot="{ Component }">
          <transition appear name="fade-transform" mode="out-in">
            <component :is="Component" />
          </transition>
        </router-view>
      </el-main>
    </el-container>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { useRoute } from 'vue-router'
import { pageList } from '@/router'
const route = useRoute()
const currentPath = computed(() => route.path)
</script>

<style scoped lang="scss">
.container_max {
  height: 100vh;
  width: 100%;
  box-sizing: border-box;
}
</style>
